<template>
  <div>
    <div class="gedan">
      <div class="nav">
        <i class="iconfont icon-zuojiantou" @click="fanhui()"></i>
        <p>歌单</p>
        <i class="iconfont icon-016fangdajing"></i>
        <i class="iconfont icon-gengduo-shuxiang"></i>
      </div>
      <div class="deg">
        <div class="ged2">
          <img src="gedtx.jpg" class="img1" />
          <div class="ged3">
            <p class="p1">网易CEO丁磊喜欢的音乐</p>
            <div class="ged4">
              <img src="tx.jpg" class="img2" />
              <p>网易CEO丁磊</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tux">
        <ul>
          <li>
            <i class="iconfont icon-jiahao"></i>

            26775
          </li>
          <li />
          <li><i class="iconfont icon-008duihuakuang-4"></i>6581</li>
          <li />
          <li class="lis">
            <i class="iconfont icon-fenxiang_o"></i>
            8888
          </li>
          <li />
        </ul>
      </div>
      <div class="gequ">
        <div class="gequlist">
          <i class="iconfont icon-bofang-copy"></i>
          <p class="bofa">播放全部</p>
          <i class="iconfont icon-xiayige02"></i>
          <i class="iconfont icon-zhengpinbaozhangduigou"></i>
        </div>
        <div class="gequbofang" v-for="(v, i) in arr" :key="i">
          <span class="s">{{ v.id }}</span>
          <div class="whith">
            <P class="singp">{{ v.songName }}</P>
            <p class="singp2">{{ v.musicianName }}</p>
          </div>
          <div>
            <!-- <i class="iconfont icon-boshiweb_bofangliang"></i>
            <i class="iconfont icon-gengduo-shuxiang"></i> -->
          </div>
          <audio :src="v.songUrl" controls></audio>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getlink } from "../../../api/getlink";
export default {
  data() {
    return {
      arr: [],
    };
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
  },
  mounted() {
    getlink("/proxy/userHome/findAll").then((ok) => {
      console.log(ok.data.data);
      this.arr = ok.data.data;
    });
  },
};
</script>

<style scoped>
audio {
  width: 1.7rem;
  height: 0.5rem;
}
.gedan {
  background-color: #295f6b;
  height: 5.05rem;
}
.deg {
  background-color: #295f6b;
  display: flex;
}
.img1 {
  width: 2.48rem;
  height: 2.48rem;
  border-radius: 0.24rem;
}
.img2 {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
}
.ged2 {
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.p1 {
  color: #fff;
  font-size: 0.29rem;
}
p:nth-of-type(2) {
  color: #7297a5;
  font-size: 0.22rem;
  display: inline-block;
  vertical-align: middle;
}
.ged3 {
  margin-left: 0.3rem;
  letter-spacing: 00.05rem;
}
.ged3 > .ged4 {
  width: 2.8rem;
  margin-top: 0.27rem;
  display: flex;
  justify-content: space-around;
  color: #7297a5;
}
.nav {
  width: 6.65rem;
  height: 1.5rem;
  margin: 0 auto;
  color: #fff;
  font-size: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.iconfont {
  font-size: 0.4rem;
}
.tux {
  width: 5.4rem;
  height: 0.92rem;
  background-color: #fff;
  border-radius: 0.5rem;
  margin: 0.6rem auto;
  text-align: center;
}
ul {
  text-align: center;
  padding-top: 0.2rem;
  width: 4.47rem;
  margin: 0 auto;
  color: #4d4d4d;
  font-weight: 550;
}
li {
  float: left;
  width: 1.43rem;
  border-right: 00.01rem solid #4d4d4d;
  text-align: center;
}
.icon-jiahao {
  color: #4d4d4d;
  font-weight: 600;
}
.icon-008duihuakuang-4 {
  color: #4d4d4d;
  font-weight: 600;
}
.icon-fenxiang_o {
  color: #4d4d4d;
  font-weight: 600;
}
.lis {
  border-right: none;
}
.gequ {
  margin-top: 00.45rem;
  height: 13.25rem;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}
.gequlist {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon-bofang-copy {
  color: #fe4a37;
  font-size: 0.35rem;
}
.bofa {
  color: #2f2f2f;
  font-size: 0.3rem;
  font-weight: 600;
}
.icon-xiayige02 {
  color: #2f2f2f;
  font-size: 0.3rem;
  font-weight: 600;
}
.icon-zhengpinbaozhangduigou {
  color: #2f2f2f;
  font-size: 0.3rem;
  font-weight: 600;
}
.gequbofang {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 00.6rem;
  font-weight: 500;
}
.s {
  font-size: 0.25rem;
  color: #bababa;
}
.singp {
  font-size: 0.25rem;
  color: #313131;
  margin-top: 0.2rem;
}
.singp2 {
  font-size: 0.25rem;
  color: #311b1b;
}
.icon-boshiweb_bofangliang {
  font-size: 0.36rem;
  color: #b6b6b6;
}
.icon-gengduo-shuxiang {
  font-size: 0.36rem;
  color: #b6b6b6;
}
.whith {
  width: 2rem;
}
</style>